<template>
	<div >
		<!--查询条件start --111s-->
		<el-card class="box-card acc-card">
			<el-form :model="formData" label-width="140px" style="width: 80%; margin: 0 auto">
				<el-form-item style="background: #e1e1e1">
					<span style="color: #3a3a3a; margin-left: -120px">用户信息</span>
				</el-form-item>
				<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
					<el-form-item label="头像：" style="width: 50%; display: inline-block">
						<!--<img :src="formData.userpic" alt style="width: 60px;height: 50px">-->
						<el-popover v-if="formData.userpic" placement="right" trigger="hover">
							<img :src="formData.userpic" style="width: 400px; border-radius: 3px" />
							<img slot="reference" :src="formData.userpic"
								style="max-height: 80px; max-width: 50px; border-radius: 5px" />
						</el-popover>
						<span v-else>-</span>
					</el-form-item>
					<el-form-item label="昵称：" style="width: 50%; display: inline-block">
						<input style="width:100%" v-model="formData.usernick" type="text" readonly />
					</el-form-item>
				</el-form-item>
				<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
					<el-form-item label="企业名称：" style="width: 50%; display: inline-block">
						<input style="width:100%" v-model="formData.enterprisename" type="text" readonly />
					</el-form-item>
					<el-form-item label="手机号：" style="width: 50%; display: inline-block">
						<input style="width:100%" v-model="formData.usermobile" type="text" readonly />
					</el-form-item>
				</el-form-item>
				<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
					<el-form-item label="总业绩：" style="width: 50%; display: inline-block">
						<input v-model="formData.usertotalintegral" type="text" readonly />
					</el-form-item>
					<el-form-item label="总贡献值：" style="width: 50%; display: inline-block">
						<input style="width:100%" v-if="formData.newreaccucvsj" v-model="formData.newreaccucvsj" type="text" readonly />
						<input style="width:100%" v-else value="-" type="text" readonly />
					</el-form-item>
				</el-form-item>
				<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
					<el-form-item label="商城级别：" style="width: 50%; display: inline-block">
						<input style="width:100%" v-if="formData.mallLevel == 0" value="体验商城" type="text" readonly />
						<input style="width:100%" v-else value="共享商城" type="text" readonly />
					</el-form-item>
					<el-form-item label="注册时间：" style="width: 50%; display: inline-block">
						<input style="width:100%" :value="formData.userregisttime | formatDateStr('yyyy-MM-dd')" type="text" readonly />
					</el-form-item>
				</el-form-item>

				<div>
					<el-form-item style="background: #e1e1e1">
						<span style="color: #3a3a3a; margin-left: -120px">服务商城信息</span>
					</el-form-item>

					<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
						<el-form-item label="头像：" style="width: 50%; display: inline-block">
							<!--<img :src="formData.userpic" alt style="width: 60px;height: 50px">-->
							<el-popover v-if="superioruserFrom.userpic" placement="right" trigger="hover">
								<img :src="superioruserFrom.userpic" style="width: 400px; border-radius: 3px" />
								<img slot="reference" :src="superioruserFrom.userpic"
									style="max-height: 80px; max-width: 50px; border-radius: 5px" />
							</el-popover>
							<span v-else>-</span>
						</el-form-item>
						<el-form-item label="昵称：" style="width: 50%; display: inline-block">
							<input style="width:100%" v-model="superioruserFrom.usernick" type="text" readonly />
						</el-form-item>
					</el-form-item>
					<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
						<el-form-item label="企业名称：" style="width: 50%; display: inline-block">
							<input style="width:100%" v-model="superioruserFrom.enterprisename" type="text" readonly />
						</el-form-item>
						<el-form-item label="手机号：" style="width: 50%; display: inline-block">
							<input style="width:100%" v-model="superioruserFrom.usermobile" type="text" readonly />
						</el-form-item>
					</el-form-item>
					<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
						<el-form-item label="总业绩：" style="width: 50%; display: inline-block">
							<input style="width:100%" v-model="superioruserFrom.usertotalintegral" type="text" readonly />
						</el-form-item>
						<el-form-item label="总贡献值：" style="width: 50%; display: inline-block">
							<input style="width:100%" v-if="superioruserFrom.newreaccucvsj" v-model="superioruserFrom.newreaccucvsj" type="text" readonly />
							<input style="width:100%"  v-else value="-" type="text" readonly />
						</el-form-item>
					</el-form-item>
					<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
						<el-form-item label="商城级别：" style="width: 50%; display: inline-block">
							<input style="width:100%" v-if="superioruserFrom.mallLevel == 0" value="体验商城" type="text" readonly />
							<input style="width:100%" v-else value="共享商城" type="text" readonly />
						</el-form-item>
						<el-form-item label="注册时间：" style="width: 50%; display: inline-block">
							<input style="width:100%" :value="superioruserFrom.userregisttime | formatDateStr('yyyy-MM-dd')" type="text"
								readonly />
						</el-form-item>
					</el-form-item>
				</div>
				<div v-loading="loading">
					<el-form-item style="background: #e1e1e1">
						<span style="color: #3a3a3a; margin-left: -120px">被服务商城信息（{{ totalNumber }}个）</span>
					</el-form-item>
					<div v-if="totalNumber==0" style="text-align:center;margin-bottom: 14px;">暂无数据~~</div>
					<el-collapse v-model="activeName" accordion style="width: 95%; margin: 0 auto">
						<el-collapse-item v-for="(item,index) in list" :key="index" :title="item.enterprisename" :name="index" >
							<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
								<el-form-item label="头像：" style="width: 50%; display: inline-block">
									<!--<img :src="item.userpic" alt style="width: 60px;height: 50px">-->
									<el-popover v-if="item.userpic" placement="right" trigger="hover">
										<img :src="item.userpic" style="width: 400px; border-radius: 3px" />
										<img slot="reference" :src="item.userpic" style="max-height: 80px; max-width: 50px;border-radius: 5px;" />
									</el-popover>
									<span v-else>-</span>
								</el-form-item>
								<el-form-item label="昵称：" style="width: 50%; display: inline-block">
									<input style="width:100%" v-model="item.usernick" type="text" readonly />
								</el-form-item>
							</el-form-item>
							<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
								<el-form-item label="企业名称：" style="width: 50%; display: inline-block">
									<input style="width:100%" v-model="item.enterprisename" type="text" readonly />
								</el-form-item>
								<el-form-item label="手机号：" style="width: 50%; display: inline-block">
									<input style="width:100%" v-model="item.usermobile" type="text" readonly />
								</el-form-item>
							</el-form-item>
							<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
								<el-form-item label="总业绩：" style="width: 50%; display: inline-block">
									<input style="width:100%" v-model="item.usertotalintegral" type="text" readonly />
								</el-form-item>
								<el-form-item label="总贡献值：" style="width: 50%; display: inline-block">
									<input style="width:100%" v-if="item.newreaccucvsj" v-model="item.newreaccucvsj" type="text" readonly />
									<input style="width:100%" v-else value="-" type="text" readonly />
								</el-form-item>
							</el-form-item>
							<el-form-item style="border-bottom: 1px solid #ebeef5" label-width="0px">
								<el-form-item label="商城级别：" style="width: 50%; display: inline-block">
									<input style="width:100%" v-if="item.mallLevel == 0" value="体验商城" type="text" readonly />
									<input style="width:100%" v-else value="共享商城" type="text" readonly />
								</el-form-item>
								<el-form-item label="注册时间：" style="width: 50%; display: inline-block">
									<input style="width:100%" :value=" item.userregisttime | formatDateStr('yyyy-MM-dd')" type="text" readonly />
								</el-form-item>
							</el-form-item>
						</el-collapse-item>
					</el-collapse>
					<!--分页模块start-->
					<el-pagination class="pagination-container" background :page-size="query.pageSize"
						@size-change="handleSizeChange" @current-change="handleCurrentChange"
						layout="total,sizes,prev, pager, next, jumper" :current-page="query.currentPage"
						:page-sizes="[5, 10, 20, 30, 50]" :total="totalNumber"></el-pagination>
				</div>
			</el-form>
		</el-card>
		<!--查看弹框end-->
	</div>
</template>
<script>
	import {
		querySuperioruser,
		queryInvitedUserHDPage
	} from "../../api/mbuser/mbuser";

	export default {
		data() {
			return {
				activeName: "", //折叠面板当前打开
				query: {
					//查询条件
					userId: "",
					currentPage: 1,
					pageSize: 5,
				},
				totalNumber: 0,
				loading: true, //列表加载
				formData: {}, //详情对象
				superioruserFrom:{},//被服务商详情
				list:[],//获取被服务商城信息列表
			};
		},
		mounted() {
			console.log(this.$route.query);
			this.formData = this.$route.query;
			this.query.userId=this.formData.userid
			this.getList();
			this.querySuperioruser();
		},
		methods: {
			querySuperioruser(){
				this.loading = true;
				querySuperioruser(this.query)
					.then((response) => {
						if (response.code != 0) {
							this.$message.error(response.message);
							this.loading = false;
							return false;
						}
						this.superioruserFrom = response.data.superioruser || {};
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch(() => {
						this.loading = false;
						this.list = [];
					});
			},
			/*获取被服务商城信息列表*/
			getList() {
				this.loading = true;
				queryInvitedUserHDPage(this.query)
					.then((response) => {
						if (response.code != 0) {
							this.$message.error(response.message);
							this.loading = false;
							return false;
						}
						this.list = response.data.list || [];
						if (this.list.length > 0) {
							let mylist = this.list;
							for (var i = 0; i < mylist.length; i++) {
								mylist[i].userban = mylist[i].userban.toString();
							}
							this.list = mylist;
						}
						this.totalNumber = response.data.totalNumber || 0;
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch(() => {
						this.loading = false;
						this.list = [];
					});
			},
			/*点击页数*/
			handleCurrentChange(val) {
				
				this.query.currentPage = val;
				this.getList();
				this.activeName=""
			},

			/*选择每页条数【10,20,30,40,50】*/
			handleSizeChange(val) {
				
				this.query.pageSize = val;
				this.getList();
				this.activeName=""
			},
		}
	};
</script>
